@<template>
  <div class="database" v-if="goods.services">
      <div>
          <p>{{goods.title}}</p>
      </div>
      <div>
          <span>{{goods.realPrice | rmbPrice}} </span>
          <span> {{goods.oldPrice}}</span>
          <span v-if="goods.discount" >{{goods.discount}}</span>
      </div>
      <div>
          <span >{{goods.columns[0]}}</span>
          <span >{{goods.columns[1]}}</span>
          <span >{{goods.services[goods.services.length-1].name}}</span>
      </div>
      <div>
          <span goods.services v-for="index in goods.services.length-1" :key="index">
              <img :src="goods.services[index-1].icon" alt="">
              <span>{{goods.services[index-1].name}}</span>
          </span>
          
      </div>
  </div>
</template>

<script>
export default {
    props: {
        goods: {
            type: Object,
            default: {}
        }
    },
    filters:{
        rmbPrice(price){
            return '￥'+price
        }
    }
}
</script>

<style scoped>
.database div:nth-of-type(1){
    font-size: 14px;
    margin: 10px;
}
.database div:nth-of-type(2) {
    padding: 0 10px 10px 10px;
}
.database div:nth-of-type(2) span:nth-of-type(1){
    font-size: 25px;
    /* margin: 10px; */
    color: red;
}
.database div:nth-of-type(2) span:nth-of-type(2) {
    font-size: 12px;
    text-decoration: line-through;
    margin-right: 5px;
}
.database div:nth-of-type(2) span:nth-of-type(3) {
    display:inline-block;
    font-size: 18px;
    background-color: deeppink;
    color: #fff;
    padding:4px;
    border-radius: 10px;
    
}
.database div:nth-of-type(3){
    display: flex;
    justify-content: space-between;
    padding:10px;
    padding-bottom: 4px;
    font-size: 12px;
    color: rgba(0,0,0,.3);
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.database div:nth-of-type(4) {
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    padding: 20px 10px;
    border-bottom: 4px solid #f9f9f9;
}
.database div:nth-of-type(4) img {
    width: 12px;
    vertical-align: middle;
    padding-bottom: 2px;
}

</style>